<template>
  <div v-if="isOpen" class="base">
    <div class="panel-wrap" :class="{ open }" @transitionend="onTransitionEnd">
      <div v-for="route in routes" :key="`auth-dialog-${route.value}`">
        <component :is="route.component" :is-show="now === route.value">
          <template #append-icon>
            <button @click="open = false">
              <Icon size="16" name="closeBold"></Icon>
            </button>
          </template>
        </component>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { useAuthDialogStore } from '@/store/auth-dialog'
import { useAuthRouteStore } from '@/store/auth-route'

const authDialogStore = useAuthDialogStore()
const { close } = authDialogStore
const { isOpen } = storeToRefs(authDialogStore)

const authRouteStore = useAuthRouteStore()
const { now, routes } = storeToRefs(authRouteStore)

// 滑動進場
const open = ref(false)
watch(isOpen, (v) => {
  if (v) {
    requestAnimationFrame(() => (open.value = true))
  }
})
function onTransitionEnd() {
  if (!open.value) {
    close()
  }
}
</script>
<style scoped lang="scss">
.base {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  position: absolute;
  top: 0;
  z-index: 1; // MediaWall.vue 當中的 tab sticky 時需要設定 z-index，會跟這邊衝突所以這邊也得設定至少同層級

  .panel-wrap {
    width: 100%;
    height: 100%;
    transform: translateY(100%);
    transition: transform 0.3s ease;

    &.open {
      transform: none;
    }
  }
}
</style>
